<div  class="content-wrapper" [@routerTransition]>
    <menu-Info-container [kind]="kind"  [seo]="pageConfig?.diySeo">
        <div role="actions" >
            <button (click)="swapOrder()" class="btn btn-primary blue  mr-1"
                *ngIf="permissionDic['Pages_Manage_Content_Update']">
                <i class="bi bi-arrow-down-up"></i> {{"Order" | localize}}
            </button>
            <button (click)="create()" *ngIf="!pageConfig?.prohibitAdding && permissionDic['Pages_Manage_Content_Create']"
                class="btn btn-primary blue mr-1">
                <i class="fa fa-plus"></i> {{"CreateNew" | localize}}
            </button>
<!--        <button (click)="synchorization()" class="btn btn-primary blue mr-1"
                *ngIf="dataSynchronous && permissionDic['Pages_Manage_Content_Synchorization']">
                <i class="fa fa-plus"></i>{{"ManualSynchorization" | localize}}
            </button> -->
            <button (click)="changeState(true)" *ngIf="!pageConfig?.prohibitAdding && permissionDic['Pages_Manage_Content_Publish']"
                class="btn btn-primary blue mr-1">
                <i class="fa fa-book"></i> {{"Release" | localize}}
            </button>
            <button (click)="changeState(false)" *ngIf="!pageConfig?.prohibitAdding && permissionDic['Pages_Manage_Content_Publish']"
                class="btn btn-warning mr-1">
                <i class="fa fa-reply"></i> {{"CancelRelease" | localize}}
            </button>
            <button (click)="delete()" *ngIf="permissionDic['Pages_Manage_Content_Delete']" class="btn btn-warning">
                <i class="fa fa-trash"></i> {{"Delete" | localize}}
            </button>
        </div>

        <div role="content"  [busyIf]="isLoading">
            <form class="form" >
                <div>
                    <div class="row align-items-center mb-4">
                        <div class="col-xl-12">
                            <div class="form-group m-form__group align-items-center">
                                <div class="input-group">
                                    <input [(ngModel)]="inputPara.filter" name="filterText" autoFocus
                                           class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                           type="text">
                                    <div class="input-group-append">
                                        <button (click)="getListData()" class="btn btn-default"
                                                type="submit">
                                            <i class="icon-magnifier"
                                               [attr.aria-label]="l('Search')"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" *ngIf="!pageConfig?.prohibitAdding && advancedFiltersAreShown">
                        <div class="col-xl-6">
                            <div class="form-group">
                                <label class="control-label">{{"InfoState" | localize}}</label>
                                <select class="form-control"  name="infoState" (change)="getListData()" [(ngModel)]="inputPara.infoState">
                                    <option value="#" >{{"InfoState" | localize}}</option>
                                    <option value="ActiveState">{{"HasRelease" | localize}}</option>
                                    <option value="UnActiveState">{{"NotRelease" | localize}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4" *ngIf="!pageConfig?.prohibitAdding">
                        <div class="col-sm-12">
                            <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                  (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                <i class="fa fa-angle-down"></i> {{"ShowAdvancedFilters" | localize}}
                            </span>
                            <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                  (click)="advancedFiltersAreShown=!advancedFiltersAreShown">
                                <i class="fa fa-angle-up"></i> {{"HideAdvancedFilters" | localize}}
                            </span>
                        </div>
                    </div>
                </div>
            </form>

            <div class="tableContainer">
                <!--<Primeng-TurboTable-Start>-->
                <content2-list-tab #contentListTab [primengTableHelper]="primengTableHelper"
                                  [permissionDic]="permissionDic"
                                  [pageConfig]="pageConfig"
                                  (getListData)="getListData($event)"
                                  (goRelatePage)="goRelatePage($event)"
                                  (editModal)="editModal($event)"></content2-list-tab>
                <!--<Primeng-TurboTable-End>-->
            </div>
        </div>
    </menu-Info-container>

    <content2-detail-modal #contentDetailModal (backListEvent)="reloadPage()" (seoEdit)="goSeoModal($event)"></content2-detail-modal>
    <content2-list-modal #contentListModal></content2-list-modal>
    <seo-modal #seoModal></seo-modal>
    <order-by-modal #orderByModal  (callback)="getListData($event)"></order-by-modal>
</div>
